import React from 'react'
import styled from 'styled-components'

import Color from '../Color'

const Text = props => <Container {...props}>{props.children}</Container>

const sizeProp = {
    large: '46px',
    h2: '38px',
    h3: '36px',
    title: '30px',
    heading: '28px',
    subheading: '22px',
    medium: '18px',
    body: '16px',
    small: '14px',
    mini: '12px',
}

const Container = styled.span`
    color: ${({ color }) => Color[color]};
    font-size: ${({ type }) => sizeProp[type]};
    font-weight: ${({ weight }) => weight};
    text-align: ${({ align }) => align || 'left'};
    text-decoration: ${({ decoration }) => decoration || 'normal'};
`

export default Text



// WEBPACK FOOTER //
// ./src/components/Text/index.js